<template>
    <div class="goods-list">
      <!-- <router-link class="goods-item" v-for="item in goodsList" :key="item.id" tag="div" :to="'/home/GoodsInfo/'+item.id">
          <img :src="item.img_url" alt="">
          <h1 class="title">{{item.title}}</h1>
        <div class="info">
            <p class="price">
                <span class="now">{{item.sell_price}}</span>
                <span class="old">{{item.market_price}}</span>
            </p>
            <p class="sell">
                <span>热卖中</span>
                <span>剩{{item.stock_quantity}}件</span>
            </p>
        </div>
      </router-link> -->

      <!-- 在网页中,有两种跳转方式
      方式1:使用a标签的形式 叫做标签跳转
      方式2:使用window.location.href的形式,叫做编程式导航 -->
        <div class="goods-item" v-for="item in goodsList" :key="item.id" @click="goDetail(item.id)">
          <img :src="item.img_url" alt="" >
          <h1 class="title">{{item.title}}</h1>
        <div class="info">
            <p class="price">
                <span class="now">{{item.sell_price}}</span>
                <span class="old">{{item.market_price}}</span>
            </p>
            <p class="sell">
                <span>热卖中</span>
                <span>剩{{item.stock_quantity}}件</span>
            </p>
        </div>
      </div>

      <mt-button type="danger" size="large" @click="getMove">加载更多</mt-button>
    </div>
</template>

<script>
export default {
    data() {
        return {
            //data是往自己组件内部,挂载一些私有数据
        pageindex:1, //分页的页数
        goodsList:[]  //存放商品列表的数组
        }
    },
    created() {
        this.getGoodsList()
    },
    methods: {
        getGoodsList(){
            //分析:获取商品列表
            this.$http.get('api/getgoods?pageindex='+this.pageindex).then(result=>{
                if (result.body.status===0) {
                    // this.goodsList=result.body.message
                    //concat() 方法用于连接两个或多个数组。该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本。
                    this.goodsList=this.goodsList.concat(result.body.message)
                }
            })
        },
        getMove(){
            this.pageindex++
            this.getGoodsList();
        },
        goDetail(id){
            //使用js形式进行路由导航

            //注意:一定要区分thisthis.$route 和 this.$router 这两个对象,
            //其中:this.$route 是路由参数参数对象,所有路由中的参数,params,query都属于它
            //其中:this.$router 是一个路由导航对象,用它可以方便的使用JS代码,实现路由的前进,后退,跳转到新的URL地址
            //1.最简单的
            // this.$router.push('/home/GoodsInfo/'+id)
            // 2.传递对象
            // this.$router.push({path:"/home/GoodsInfo/"+id})
            //3.传递一个命名的路由
            this.$router.push({name:'goodsinfo',params:{id}})
        }
    },

}
</script>

<style lang="scss" scoped> .goods-list{
     display: flex;
     flex-wrap: wrap;
     padding: 0.4375rem;
     justify-content: space-between;
     .goods-item{
         padding: 0.125rem;
         width: 49%;
         border: 1px solid #ccc;
         box-shadow: 0 0 0.5rem #ccc;
         margin: 0.25rem 0;
         display: flex;
         flex-direction: column;
         justify-content: space-between;
         min-height: 18.3125rem;
         img{
             width: 100%;
        }
         .title{
             font-size: 0.875rem;
        }
         .info{
             background-color: #eee;
             P{
                 margin: 0;
                 padding: 0.3125rem;
            }
             .price{
                 .now{
                     color: red;
                     font-weight: bold;
                     font-size: 1rem;
                }
                 .old{
                     text-decoration: line-through;
                     font-size: 0.75rem;
                     margin-left: 0.625rem;
                }
            }
             .sell{
                 display: flex;
                 justify-content: space-between;
                 font-size: 0.8125rem;
            }
        }
    }
}
 </style> 
